<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${pageTitle}">订单信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .header {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        .content {
            margin: 20px 0;
        }
        .nav {
            margin-bottom: 20px;
        }
        .nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #3498db;
        }
        .nav a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="header">
		<div class="order-code-container">
		    <span class="code-label">订单编号：</span>
			<span class="info-value" th:text="${order.ordercode}"></span>
		</div>
		<div class="order-code-container">
		    <span class="code-label">订单状态：</span>
			<span class="info-value" th:text="${order.status}"></span>
		</div>
		<!-- 操作按钮区域 -->
		<div class="order-actions">
			|
			<button class="btn btn-close" th:data-ordercode="${order.ordercode}"  th:onclick="auditOrder(this, 'reject')">关闭订单</button>
			<button class="btn btn-pass"th:data-ordercode="${order.ordercode}"   th:onclick="auditOrder(this, 'permit')">审核通过</button>
		</div>
    </div>
	<div class="content">
	    <div class="info-item">
	        <span class="info-label">姓名：</span>
	        <span class="info-value" th:text="${order.name}"></span>
	    </div>
	    <div class="info-item">
	        <span class="info-label">电话：</span>
	        <span class="info-value" th:text="${order.phone}"></span>
	    </div>
	    <div class="info-item">
	        <span class="info-label">身份证号：</span>
	        <span class="info-value" th:text="${order.idCard}"></span>
	    </div>
		<div class="info-item">
		    <span class="info-label">年龄：</span>
		    <span class="info-value" th:text="${order.age}"></span>
		</div>
		<div class="info-item">
			<span class="info-label">手机型号：</span>
			<span class="info-value" th:text="${order.phoneType}"></span>
		</div>
		<div class="info-item">
			 <span class="info-label">预收期数：</span>
			 <span class="info-value" th:text="${order.yushouCount}"></span>
		</div>
		<div class="info-item"> 
			 <span class="info-label">预收总金额：</span>
			 <span class="info-value" th:text="${order.firstPrice}"></span>
		</div>
		<div class="info-item"> 
			<span class="info-label">每月应还租金：</span>
			<span class="info-value" th:text="${order.monthPrice}"></span>
		</div>
		<div class="info-item"> 
			<span class="info-label">收货人姓名：</span>
			<span class="info-value" th:text="${order.recvName}"></span>
		</div>
		<div class="info-item"> 
			<span class="info-label">收货人手机号：</span>
			<span class="info-value" th:text="${order.recvPhone}"></span>
		</div>
		<div class="info-item"> 
			<span class="info-label">收货人地址：</span>
			<span class="info-value" th:text="${order.recvAddress}"></span>
		</div>
	</div>
	<style>
	    .header {
	        color: #2c3e50;
	        border-bottom: 2px solid #3498db;
	        padding: 15px 0;
	        margin-bottom: 30px;
	        display: flex;
	        justify-content: space-between;
	        align-items: center;
	        flex-wrap: wrap;
	        gap: 15px;
	    }
	    
	    .order-header-info {
	        display: flex;
	        gap: 20px;
	        flex-wrap: wrap;
	    }
	    
	    .order-code-container {
	        display: flex;
	        align-items: center;
	        gap: 10px;
	    }
	    
	    .code-label {
	        font-size: 16px;
	        font-weight: bold;
	        color: #495057;
	    }
	    
	    .order-actions {
	        display: flex;
	        gap: 15px;
	    }
	    
	    .btn {
	        padding: 8px 20px;
	        border: none;
	        border-radius: 4px;
	        font-size: 14px;
	        font-weight: 500;
	        cursor: pointer;
	        transition: background-color 0.3s;
	    }
	    
	    .btn-pass {
	        background-color: #28a745;
	        color: white;
	    }
	    
	    .btn-pass:hover {
	        background-color: #218838;
	    }
	    
	    .btn-close {
	        background-color: #dc3545;
	        color: white;
	    }
	    
	    .btn-close:hover {
	        background-color: #c82333;
	    }
	    
	    .content {
	        max-width: 800px;
	        margin: 0 auto;
	    }
	    
	    .info-item {
	        margin-bottom: 15px;
	        line-height: 1.8;
	        display: flex;
	    }
	    
	    .info-label {
	        display: inline-block;
	        width: 120px;
	        font-weight: bold;
	        color: #495057;
	    }
	    
	    .info-value {
	        color: #2d3436;
	        flex: 1;
	    }
	</style>

	<!-- 按钮操作脚本 -->
	<script>
	    // 审核操作函数
	    function auditOrder(button, action) {
			const ordercode = button.dataset.ordercode;
	        // 确认操作
	        const confirmMessage = action === 'pass' 
	            ? '确定要审核通过此订单吗？' 
	            : '确定要关闭此订单吗？';
	            
	        if (!confirm(confirmMessage)) {
	            return;
	        }
	        
	        // 这里可以添加AJAX请求，调用后端接口处理审核逻辑
	        console.log(`订单ID: ${ordercode}, 操作: ${action}`);
	        
	        if (action === 'permit') {
				fetch('/api/info/permit?ordercode='+ordercode, {
				    method: 'POST',
				    headers: {
				        'Content-Type': 'application/json'
				    }
				})
				.then(response => {
				    if (!response.ok) {
				        throw new Error(`HTTP错误，状态码: response.status`);
						alert('订单审核通过:执行失败');
				    }
					window.history.back();
				    return response.json();
				})
				
	        } else {
				fetch('/api/info/reject?ordercode='+ordercode, {
								    method: 'POST',
								    headers: {
								        'Content-Type': 'application/json'
								    }
								})
								.then(response => {
								    if (!response.ok) {
								        throw new Error(`HTTP错误，状态码: response.status`);
										alert('订单已关闭:执行失败');
								    }
									 window.history.back();
								    return response.json();
								})
	        }
	    }
	</script>
</body>
</html>
